// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';
import './base.css';

/* 
  行内样式处理：
    1. style的值，需要两个花括号。第一个花括号表示接收表达式，第二花括号表示样式对象
    2. css属性名，不允许使用连字符 -
    3. 单位 px 可以省略，简写成数字形式，如 `fontSize: 20` 
    
  外部样式+类名-className处理:
    1. 新建外部 css 文件
    2. 导入 css 文件
    3. 使用 css 文件的类名

*/

const title = (
  <>
    <div style={{ color: '#fff', fontSize: 30, backgroundColor: 'gold' }}>
      行内样式变化
    </div>
    <div className='title'>类名绑定</div>
  </>
);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(title);
